<template>
  <div>
    <el-row>
      <el-col :md="24" class="mt-30px">
        <div>
          <span class="text-[#715700]">上一篇：</span>
          <nuxt-link :to="{ path: '/post/detail/' + last_post?.id }" class="no-underline text-[#333] hover:underline">{{
            last_post?.post_title
          }}</nuxt-link>
        </div>
        <div>
          <span class="text-[#715700]">下一篇：</span>
          <nuxt-link :to="'/post/detail/' + next_post?.id" class="no-underline text-[#333] hover:underline">{{
            next_post?.post_title
          }}</nuxt-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { get_last_next_post } from '~/api';

const props = defineProps({
  post_id: {
    type: Number,
    required: true,
  },
});
const { post_id } = toRefs(props);
const last_post = ref<Post>();
const next_post = ref<Post>();
// 使用 suspense 或确保数据在 SSR 时也已经准备好
const { pending, data: lastNextData } = await useAsyncData(async () => {
  return await get_last_next_post(post_id.value);
});
if (lastNextData) {
  last_post.value = lastNextData?.value?.last_article;
  next_post.value = lastNextData?.value?.next_article;
}
</script>

<style scoped></style>
